<script setup>
import { reactive, ref } from "vue";
import { addParkingApi } from '@/api/parking.js'
import { commonityListApi } from '@/hooks'
const commonity = commonityListApi()

const formRef = ref(null)
const isShow = ref(false)
//表单数据
const defaultState = (
    {
        community: '',
        name: '',
        community_code: ''
    }
)

const formData = reactive({ ...defaultState })
//验证规则
const formRule = {
    community_code: [{ required: true, message: '请输入', trigger: 'blur' }],
    name: [{ required: true, message: '请输入', trigger: 'blur' }]

}
//关闭事件
const closeHandler = () => {

}
defineExpose({
    isShow
})
</script>
<template>
    <el-drawer ref="formRef" v-model="isShow" title="添加小区" direction="rtl" size="40%" @close="closeHandler">
        <div>
            <el-form :model="formData" :rules="formRules" ref="formRef">
                <el-form-item label="所属小区" prop="community.name" :label-width="formLabelWidth">
                    <el-select slot="prepend" placeholder="请输入" v-model="formData.community_code">
                        <el-option v-for="item in commonity" :key="item.id" :label="item.name" :value="item.code" />
                    </el-select>
                </el-form-item>
                <el-form-item label="车位名称" style="width:47%;" prop="community.name" :label-width="formLabelWidth">
                    <el-input slot="prepend" placeholder="请输入" v-model="formData.name">
                    </el-input>
                </el-form-item>
            </el-form>

        </div>
        <div>
            <el-button @click="isShow = false">取消</el-button>
            <el-button type="primary">
                确定
            </el-button>
        </div>
    </el-drawer>
</template>

<style lang="scss" scoped></style>